@extends('WShop::layout')
@push('styles')
    <link href="{{asset(config('view.frontend.wap_login').'/css/fenlei.css')}}" rel="stylesheet">
 @endpush
@section('content')
    @include('WShop::public.header')
    <div class="mui-content mui-row mui-fullscreen">
        <div class="mui-col-xs-3">
            <div id="segmentedControls" style="height: 100%;background: white;" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
                <li class="mui-table-view-cell mui-media mui-control-item {{$cate_id?:'left-mui-active'}}"
                    data-url="{{route('f_Wap_Goods_classify')}}">
                <div style="text-align:center;">
                    <span class="left_name">推荐分类</span>
                </div>
                </li>
                @foreach($category as $item)
                <li class="mui-table-view-cell mui-media mui-control-item {{$cate_id == $item->id?'left-mui-active':'' }}"
                    data-url="{{route('f_Wap_Goods_classify',['cate'=>$item->id])}}">
                <div style="text-align:center;">
                    <span  class="left_name">{{$item->name_mobile}}</span>
                </div>
                </li>
                @endforeach
            </div>
        </div>
        <div id="class-box" class="mui-col-xs-9">
            <div  class="mui-control-content ShopdetailsItem right-mui-active">
                <ul class="mui-table-view mui-grid-view mui-grid-9" style="background: white;">
                    @foreach($sub_category as $item)
                    <li class="class-item mui-table-view-cell flex" title="{{$item->name_mobile}}"
                        data-url="{{route('f_Wap_Goods_goodsList',['zone'=>1,'cate'=>$item->id])}}">
                        <img src="{{$item->image}}" >
                        <div class="mui-media-body mui-text-center " style="font-size:12px;">
                            <div class='mui-ellipsis'>
                                {{$item->name_mobile}}
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar',['active'=>'classify'])
@endsection
@push('scripts')
    <script>
        var btns = $('#segmentedControls .mui-table-view-cell ')
        for (var i =0;i<btns.length;i++){
            btns[i].addEventListener('tap',function(){
              window.location = $(this).data('url');
            })
        }
        $('.class-item').each(function () {
            $(this).on('click',function () {
                window.location = $(this).data('url');
            })
        })
    </script>
@endpush